<template>
  <div class="fillcontain">
    <!-- 具体配置 -->
    <div class="content">
      <!-- 左侧树 -->
      <div class="left-tree">
        <el-button
          type="danger"
          size="mini"
          style="margin: 12px 20px 0;"
          plain
          icon="el-icon-circle-plus-outline"
          @click="standardizingAdd"
          >标准化
        </el-button>
        <div class="tree-filter">
          <el-input
            placeholder="请输入"
            v-model="filterText"
            suffix-icon="el-icon-search">
          </el-input>
        </div>
        <el-tree
          class="tree-content"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <i v-if="node.level == 1" :class="['expanded',{'el-icon-plus':!node.expanded,'el-icon-minus':node.expanded}]"></i>
            <icon-svg v-else style="font-size: 18px" iconClass="icon-yuanhuise"></icon-svg>
            <span :class="['node-ellips',{'node-label':data.level == 2}]" @click="handleNodeClick($event,data,node)">{{node.label}}</span>
            <div class="node-btn" v-if="node.level == 2">
              <icon-svg :class="{'bt-lock': data.lockFlag == 1}" style="font-size: 20px;" :iconClass="data.lockFlag == 1 ? 'bt-lock' : 'bt-unlock'" @click="lockFlag(data,node)"></icon-svg>
              <i class="el-icon-remove-outline" :style="`color:#a5a6a5;font-size: 20px;cursor: ${data.lockFlag == 1 ? 'no-drop' : 'pointer'};`" @click="delTreeNode(data,node)"></i>
            </div>
          </span>
        </el-tree>
      </div>
      <!-- 右侧配置信息 -->
      <div class="right-main">
        <div class="right-title">标准化信息</div>
        <h2>属性信息</h2>
        <div style="margin-bottom: 10px;max-height: 65px;overflow: auto;">
          <span :class="['property-title',{'property-active':item._active}]" v-for="(item,index) in propertyList" :key="index">
            <i class="property-item" @click="propertyClick(item)">{{item.propertyName}}</i> 
            <i class="el-icon-close" @click="delProperty(item)" v-if="currentNode.lockFlag == 2"></i>
          </span>
          <span style="display: inline-block;margin-left: 20px">
            <span :class="['add-btn',{'add-btn-disabled': currentNode.lockFlag == 1}]" @click="propertyAddClick(false)">+ 添加</span>
          </span>
        </div>
        <div class="attri-synonym">
          <div style="width: 96px;">属性同义词：</div>
          <div class="synonym-item">
            <span class="property-title" style="background: #fff;margin: 4px 0 4px 10px;" v-for="(item,index) in propertySynonymyList" :key="index">
              <i class="property-item">{{item.synonymy}}</i> 
              <i class="el-icon-close" @click="delAttrSynonym(item)" v-if="currentNode.lockFlag == 2"></i>
            </span>
            <span style="display: inline-block;margin-left: 20px">
              <span :class="['add-btn',{'add-btn-disabled': currentNode.lockFlag == 1}]" style="background: #fff" @click="attrSynonymAddClick()">+ 添加</span>
            </span>
          </div>
        </div>
        <!-- 保存按钮 -->
        <el-button
          :disabled="currentNode.lockFlag == 1 || !propertyList.length"
          type="danger"
          size="mini"
          style="margin-left: 20px;"
          plain
          @click="propertyListAddClick()"
          >新增
        </el-button>
        <el-button
          :disabled="currentNode.lockFlag == 1 || !propertyList.length"
          type="danger"
          size="mini"
          plain
          @click="propertySaveClick()"
          >保存
        </el-button>

        <propertyClassList style="margin-top: 15px" ref="propertyClassList" :currentNode="currentNode"></propertyClassList>

      </div>
    </div>

    <el-dialog :title="dialogHandleType == 'standardizing' ? '体检项标准化选择' : '属性选择'" class="property-dialog" :visible.sync="propertyVisible" width="750px" center>
			<!-- 查询条件 -->
			<el-row>
				<el-col :span="10" class="common-box">
					<el-input v-model="searchText" placeholder="请输入" clearable></el-input>
				</el-col>
				<el-col :span="6" style="margin-left: 10px;">
					<el-button plain type="primary" @click="searchClick">查询</el-button>
					<el-button plain type="primary" v-if="dialogHandleType == 'property'" @click="addProperty">新增</el-button>
				</el-col>
			</el-row>
			<!-- 返回结果 -->
			<div style="text-align: center; margin-top: 16px;">
				<el-transfer
					style="text-align: left; display: inline-block"
					v-model="transferValue"
					:titles="['待选择列表', '已选择列表']"
					:data="transferData.filter(item=>!item._flag)"
          @change="transferChange">
				</el-transfer>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogSave">保存</el-button>
				<el-button plain type="danger" @click="propertyVisible = false">取 消</el-button>
			</span>

      <!-- 嵌套的新增属性弹窗 -->
      <el-dialog
        class="add-property"
        title="新增属性"
        :visible.sync="addPropertyVisible"
        v-if="addPropertyVisible"
        :show-close="false"
        :close-on-click-modal="false"
        append-to-body
        width="980px"
        center
        >
        <div class="base-mian-cell-title">
          <i></i>
          <span class="tips">基本信息</span>
          </div>
        <el-form ref="propertyForm" :model="propertyForm" label-width="150px" :rules="propertyRules" style="overflow: hidden;">
          <el-col :span="12" class="common-box">
            <el-form-item label="属性编码：">
              <el-input v-model="propertyForm.propertyCode" disabled placeholder="系统自动生成" :maxlength="50" @input="inputChange($event,propertyForm,'propertyCode')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="属性名称：" prop="propertyName">
              <el-input v-model="propertyForm.propertyName" placeholder="请输入属性名称" :maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="是否有效：">
              <el-switch class="tableScopeSwitch" inactive-color="#c0c0c0" active-value="1" inactive-value="0" active-text="是" inactive-text="否" v-model="propertyForm.status"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="common-box">
            <el-form-item label="备注：">
              <el-input type="textarea" :rows="3" v-model="propertyForm.remark" placeholder="请输入备注" :maxlength="400"></el-input>
            </el-form-item>
          </el-col>
        </el-form>

        <div class="base-mian-cell-title">
          <i></i>
          <span class="tips">属性分类</span>
        </div>
        <el-table :data="propertyTableData" highlight-current-row header-cell-class-name="table-header-class" style="width: 70%">
            <el-table-column align="center" type="index" width="80" label="序号"></el-table-column>
            <el-table-column align="center" label="分类" min-width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.propertyType" placeholder="请输入" :maxlength="20"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="100"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-plus" @click="handleAdd()"></el-button>
                <el-button type="text" size="small" icon="el-icon-delete" @click="handleDel(scope.row,scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>

        <!-- 按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="propertySave">保 存</el-button>
          <el-button @click="propertyReset">取 消</el-button>
        </span>
      </el-dialog>
		</el-dialog>

    <!-- 新增属性同义词弹窗 -->
    <el-dialog
      v-if="attrSynonymVisible"
      title="新增属性同义词"
      :visible.sync="attrSynonymVisible"
      width="750px"
      :show-close="false"
      :close-on-click-modal="false"
      center>
      <div style="height: 70px;padding: 20px 105px 0px">
        <el-input placeholder="请输入属性同义词" v-model="attrSynonymText" :maxlength="20"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="attrSynonymConfig">保 存</el-button>
        <el-button @click="()=>{this.attrSynonymVisible = false}">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import propertyClassList from "../../../component/propertyClassList";

  import {
    getPhysicalStandMenuApi,
    getPhysicalStandAttributeInfoApi,
    getPhysicalCommonValueApi,
    delPhysicalStandAttributeInfoApi,
    getGeneralPropertiesApi,
    addPhysicalStandAttributeInfoApi,
    addPhysicalStandMenuApi,
    getPhysicalStandMenuListApi,
    delPhysicalStandMenuApi,
    delPhysicalCommonValueApi,
    getAttributeSortApi,
    savePhysicalCommonValueApi,
    addOrUpdateGeneralPropertiesApi,
    selectPropertySynonymyListApi,
    addPropertySynonymyListApi,
    delectPropertySynonymyListApi
  } from "@/api/medicalLibrary/medicalbank";
  import constant from "@/utils/constant";

export default {
  components: {
		propertyClassList
	},
  data() {
    let validatePropertyCode = (rule, value, callback) => {
      let reg = /^[\w]*$/
      if (value && !value.match(reg)) {
        callback(new Error('请输入字母和数字类型'));
      } else {
        callback();
      }
    }
    return {
      // 左侧树
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      entityId: null,  //选中的体检标准化id
      entityCode: '',  //选中的体检标准化Code
      propertyId: null,  //选中的属性id
      unLockList: [], //不被锁定的标准化数据
      currentNode: {},

      // 右侧属性信息
      propertyList: [],

      // -----弹窗
      // 属性选择弹窗
      propertyVisible: false,
      dialogHandleType: '',
      searchText: '',
      transferData: [],
      transferValue: [],
      movedKeys: [],  //穿梭框移动的数据

      // 嵌套的新增属性弹窗
      addPropertyVisible: false,
      propertyForm: {
        propertyCode: '',
        propertyName: '',
        status: '1',
        remark: ''
      },
      propertyRules: {
        propertyCode: [
          { required: true, message: '请输入属性编号', trigger: 'blur' },
          // { validator: validatePropertyCode, trigger: 'blur' }
        ],
        propertyName: [
          { required: true, message: '请输入属性名称', trigger: 'blur' }
        ],
      },
      propertyTableData: [{propertyType: ''}],

      // 新增属性同义词
      propertySynonymyList: [],
      attrSynonymVisible: false,
      attrSynonymText: '',
    };
  },
  created(){
    // 查询左侧规则配置树
    this.getRuleConfigTree()
  },
  methods: {
    filterNode(value, data, node) {
      let parentNode = node.parent // 父级node
      let labels = [node.label] // 当前node的名字
      let level = 1 // 层级
      while (level < node.level) {
          labels = [...labels, parentNode.label] // 当前node名字，父级node的名字
          parentNode = parentNode.parent
          level++
      }
      return labels.some(d => d.indexOf(value) !== -1)
    },
    inputChange(el,row,field){
      let val = el.replace(/[^a-zA-Z\d\-\_]/g,"")
      this.$set(row,field,val)
    },
    // 查询左侧规则配置树
    getRuleConfigTree(_index){
      this.filterText = ''
      if(!_index){
        this.entityId = null
        this.entityCode = null
      }
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      getPhysicalStandMenuApi({}).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        let newTree = [
          {
            label: '体检项标准化',
            level: 1
          }
        ]
        if(res.resultCode == constant.SUCCESS) {
          res.data.forEach(item=>{
            item.label = item.entityCode ? item.entityCode + ' ' + item.entityName : item.entityName
            item.level = 2
            item.lockFlag = 1
            if(this.unLockList.indexOf(item.id) > -1) item.lockFlag = 2
          })
          newTree[0].children = res.data
          this.treeData = newTree

          if(!_index) this.clickFirstNode()
          else {
            setTimeout(()=>{
              document.querySelectorAll('.node-label')[_index].classList.add('node-active')
            },0)
          }
        }
      })
      .catch((err) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      })
    },
    // 点击第一个体检标准化节点
    clickFirstNode(){
      setTimeout(()=>{
        if(document.querySelector('.node-label')) document.querySelector('.node-label').click()
        else {
          this.propertyList = []
          this.$refs.propertyClassList.tableData = []
        }
      },0)
    },
    // 点击第一个属性
    clickFirstProperty(){
      setTimeout(()=>{
        if(document.querySelector('.property-item')) document.querySelector('.property-item').click()
        else this.$refs.propertyClassList.tableData = []
      },0)
    },
    // 点击节点时触发
    handleNodeClick($el,data,node){
      if(data.level == 2){
        if(this.entityId == data.id && this.entityCode == data.entityCode) return
        this.propertySynonymyList = []
        this.currentNode = data

        document.querySelectorAll('.node-active').forEach(item=> item.classList.remove('node-active'))
        $el.target.classList.add('node-active')
        this.entityId = data.id
        this.entityCode = data.entityCode
        this.getPhysicalStandAttributeInfo()
      }
    },
    // 获取标准化属性信息
    getPhysicalStandAttributeInfo(_idx){
      if(!this.propertyList.length) _idx = 0
      // this.propertyList = []
      if(!_idx) this.propertyId = null
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      getPhysicalStandAttributeInfoApi({entityId: this.entityId}).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if(res.resultCode == constant.SUCCESS) {
          this.propertyList = res.data || []
          if(!_idx) this.clickFirstProperty()
          else this.propertyList[_idx]._active = true
        }else {
          this.propertyList = []
          this.$refs.propertyClassList.tableData = []
        }
      })
      .catch((err) => {
        this.propertyList = []
        this.$refs.propertyClassList.tableData = []
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      })
    },
    // 点击节点的锁时触发
    lockFlag(data,node){
      this.$set(data,'lockFlag',data.lockFlag == 1 ? 2 : 1)
      if(data.lockFlag == 2){
        if(this.unLockList.indexOf(data.id) == -1)  this.unLockList.push(data.id)
      }else {
        if(this.unLockList.indexOf(data.id) > -1)  this.unLockList.splice(this.unLockList.indexOf(data.id),1)
      }
    },
    // 点击节点的删除按钮时触发
    delTreeNode(data,node){
      if(data.lockFlag == 1) return
      this.$confirm('是否删除此标准化信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("loading/CHANGE_LOADING", true);
        delPhysicalStandMenuApi(data.id).then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          if (res.resultCode === 0) {
            this.$message.success('删除成功')
            setTimeout(()=>{
              let ids = this.treeData[0].children.map(m=>m.id)
              let _index = ids.indexOf(this.entityId)
              this.getRuleConfigTree(this.entityId == data.id ? '' : _index)
            },200)
          }
        }).catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
      })
      
    },

    // ----右侧
    // 点击属性
    propertyClick(item){
      this.propertyList.forEach(fItem=>{
        this.$set(fItem,'_active',false)
      })
      this.$set(item,'_active',true)
      if(this.propertyId == item.propertyId) return
      this.propertyId = item.propertyId
      // this.$refs.propertyClassList.tableData = []
      this.$refs.propertyClassList.option = []
      this.$refs.propertyClassList.delList = []
      // 重置分页
      this.$refs.propertyClassList.resetPage()
      // 查询属性分类
      getAttributeSortApi({id: item.propertyId}).then((res) => {
        if(res.resultCode == constant.SUCCESS) {
          this.$refs.propertyClassList.option = res.data || []
        }
      })

      this.$store.dispatch("loading/CHANGE_LOADING", true);
      this.selectPropertySynonymyList(item)
      getPhysicalCommonValueApi({propertyId: item.propertyId,entityId: item.entityId}).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if(res.resultCode == constant.SUCCESS) {
          this.$refs.propertyClassList.tableData = res.data || []
        }else this.$refs.propertyClassList.tableData = []
      })
      .catch((err) => {
        this.$refs.propertyClassList.tableData = []
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      })
    },
    // 获取属性同义词
    selectPropertySynonymyList(item){
      selectPropertySynonymyListApi({propertyId: item.propertyId,entityId: item.entityId}).then((res) => {
        if(res.resultCode == constant.SUCCESS) {
          this.propertySynonymyList = res.data || []
        }else this.propertySynonymyList = []
      })
      .catch((err) => {
        this.propertySynonymyList = []
      })
    },
    // 点击属性删除接口
    delProperty(item){
      this.$confirm('是否删除此属性信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("loading/CHANGE_LOADING", true);
        delPhysicalStandAttributeInfoApi(item).then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          if(res.resultCode == constant.SUCCESS) {
            this.$message.success('删除成功')
            setTimeout(()=>{
              let ids = this.propertyList.map(m=>m.propertyId)
              let _idx = ids.indexOf(this.propertyId)
              this.getPhysicalStandAttributeInfo(this.propertyId == item.propertyId ? '' : _idx)
            },200)
          }
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        })
      })
    },
    // 点击属性添加按钮
    propertyAddClick(flag){
      if(this.currentNode.lockFlag == 1) return
      this.dialogHandleType = 'property'
      this.propertyVisible = true
      this.searchText = ''

      // 获取属性列表
      this.transferData = []
      if(!flag) this.movedKeys = []
      if(!flag) this.transferValue = this.propertyList.map(mItem => mItem.propertyId)
      getGeneralPropertiesApi({}).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if(res.resultCode == constant.SUCCESS) {
          this.transferData = res.data || []
          this.transferData.forEach(item=>{
            item.label = item.propertyName
            item.key = item.id + ''
            if(this.transferValue.indexOf(item.key) > -1) {
              this.$set(item,'disabled',true)
            }
          })
        }
      })
      .catch((err) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      });

    },
    // 点击属性保存按钮
    propertySaveClick(){
      if(this.$refs.propertyClassList.delList.length) {
        this.$store.dispatch("loading/CHANGE_LOADING", true);
        delPhysicalCommonValueApi(this.$refs.propertyClassList.delList).then((res) => {
          this.savePhysicalCommonValue()
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
      } else this.savePhysicalCommonValue()
    },

    savePhysicalCommonValue(){
      let list = JSON.parse(JSON.stringify(this.$refs.propertyClassList.tableData))
      list.forEach(item=>{
        item.entityId = this.entityId
        item.propertyId = this.propertyId
        if(item.relationList && item.relationList.length){
          item.relationList.forEach(rItem=>{
            rItem.entityId = this.entityId
            rItem.propertyId = this.propertyId
            if(item.id) rItem.valueId = item.id
          })
        }
      })
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      savePhysicalCommonValueApi(list).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        this.$message.success('保存成功')
        // this.propertyId = null
        setTimeout(()=>{
          let ids = this.propertyList.map(m=>m.propertyId)
          let _idx = ids.indexOf(this.propertyId)
          this.propertyId = null
          document.querySelectorAll('.property-item')[_idx].click()
        },200)
      })
      .catch((err) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      });
    },

    // 点击属性列表新增按钮
    propertyListAddClick(){
      this.$refs.propertyClassList.handleAdd()
    },
    // 点击标准化按钮
    standardizingAdd(){
      this.dialogHandleType = 'standardizing'
      this.propertyVisible = true
      this.searchText = ''

      // 获取属性列表
      this.transferData = []
      this.movedKeys = []
      this.transferValue = this.treeData[0].children.map(mItem => mItem.entityCode)
      getPhysicalStandMenuListApi({}).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if(res.resultCode == constant.SUCCESS) {
          this.transferData = res.data || []
          this.transferData.forEach(item=>{
            item.label = item.projectNumber + '-' + item.projectName
            item.key = item.projectNumber
            if(this.transferValue.indexOf(item.key) > -1) {;
              this.$set(item,'disabled',true)
            }
          })
        }
      })
      .catch((err) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      });
    },
    // 点击弹窗的查询按钮
    searchClick(){
      this.transferData.forEach(item=>{
        this.$set(item,'_flag',false)
        if(this.searchText && item.label.indexOf(this.searchText) == -1) this.$set(item,'_flag',true)
      })
    },
    // 穿梭框被选中时触发
    transferChange(value, direction, movedKeys){
      this.movedKeys = [...this.movedKeys,...movedKeys]
      this.transferData.forEach(item=>{
        if(this.transferValue.indexOf(item.key) > -1) {;
          this.$set(item,'disabled',true)
        }
      })
    },
    // 点击弹窗的新增按钮
    addProperty(){
      this.addPropertyVisible = true
    },
    // 点击弹窗的保存按钮
    dialogSave(){
      if(!this.movedKeys.length) {
        this.$message.success('保存成功')
        this.propertyVisible = false
      }else{
        let params = null
        if(this.dialogHandleType == 'standardizing'){
          params =  {
            examinationList: this.transferData.filter(item => this.movedKeys.indexOf(item.key) > -1)
          }
        }else {
          params = {
            entityId: this.entityId,
            propertyList: this.transferData.filter(item => this.movedKeys.indexOf(item.key) > -1)
          }
        }
        let url = this.dialogHandleType == 'standardizing' ? addPhysicalStandMenuApi : addPhysicalStandAttributeInfoApi
        this.$store.dispatch("loading/CHANGE_LOADING", true);
        url(params).then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          if(res.resultCode == constant.SUCCESS) {
            this.$message.success('保存成功')
            this.propertyVisible = false
            setTimeout(()=>{
              let ids = this.treeData[0].children.map(m=>m.id)
              let _index = ids.indexOf(this.entityId)
              let propertyIds = this.propertyList.map(m=>m.propertyId)
              let _idx = propertyIds.indexOf(this.propertyId)
              this.dialogHandleType == 'standardizing' ? this.getRuleConfigTree(_index) : this.getPhysicalStandAttributeInfo(_idx)
            },200)
          }
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
      }
      // 
    },

    // 嵌套的新增属性弹窗
    // 点击列表的添加按钮
    handleAdd(){
      this.propertyTableData.push({propertyType: ''})
    },
    // 点击列表的删除按钮
    handleDel(row,_index){
      this.propertyTableData.splice(_index,1); 
      if(!this.propertyTableData.length) this.handleAdd()
    },
    // 点击弹窗保存按钮
    propertySave(){
      this.$refs.propertyForm.validate((valid) => {
        if (valid) {
          let newArr = this.propertyTableData.filter(fItem=>fItem.propertyType.trim())
          if(newArr.length < this.propertyTableData.length) {
            this.$message.warning('存在数据为空的属性分类')
            return
          }
          let params = {
            ...this.propertyForm,
            generalCommonValueRelationVos: this.propertyTableData
          }
          this.$store.dispatch("loading/CHANGE_LOADING", true);
          addOrUpdateGeneralPropertiesApi(params).then((res) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
            if (res.resultCode == constant.SUCCESS) {
              this.propertyReset()
              this.$message.success('属性新增成功')
              setTimeout(()=>{
                this.propertyAddClick(true)
              },200)
            }
          }).catch((err) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
          });
        }
      });
    },
    // 点击弹窗取消按钮
    propertyReset(){
      this.addPropertyVisible = false
      this.propertyTableData = [{propertyType: ''}]
      this.propertyForm = {
        propertyCode: '',
        propertyName: '',
        status: '1',
        remark: ''
      }
    },

    // 新增属性同义词
    attrSynonymAddClick(){
      if(this.currentNode.lockFlag == 1) return
      this.attrSynonymVisible = true
      setTimeout(()=>{
        this.attrSynonymText = ''
      },0)
    },
    // 属性同义词保存
    attrSynonymConfig(){
      if(!this.attrSynonymText.trim()) {
        this.$message.warning('请先输入同义词')
        return
      }
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      addPropertySynonymyListApi([{propertyId: this.propertyId,entityId: this.entityId,synonymy: this.attrSynonymText.trim()}]).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if(res.resultCode == constant.SUCCESS) {
          this.$message.success('保存成功')
          this.selectPropertySynonymyList({propertyId: this.propertyId,entityId: this.entityId})
        }
      })
      .catch((err) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      })

      this.attrSynonymVisible = false
    },
    // 删除属性同义词
    delAttrSynonym(item){
      this.$confirm('是否删除此属性同义词?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("loading/CHANGE_LOADING", true);
        delectPropertySynonymyListApi([item]).then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          if(res.resultCode == constant.SUCCESS) {
            this.$message.success('删除成功')
            this.selectPropertySynonymyList({propertyId: this.propertyId,entityId: this.entityId})
          }
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        })
      })
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
}
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;
  .fastQuery {
    padding: 15px 20px 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;
    .fastQuery-title {
      font-size: 16px;
    }
  }
  .content{
    padding-top: 15px;
    height: calc(100vh - 230px);
    min-height: 450px;
    margin: 0 10px;
    padding-bottom: 10px;
    display: flex;
  }
  .left-tree{
    width: 340px;
    margin-right: 10px;
    border: 1px solid #e1e1e1;
    .tree-filter{
      padding: 20px 20px 0 20px;
    }
    .tree-content{ 
      margin-left: 10px;
    }
    .expanded{
      font-size: 12px;
      border: 1px solid #808080;
      color: #808080;
    }
    .node-btn{
      width: 52px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .bt-lock{
      margin-left: -3px;
      margin-right: 3px;
    }
    .node-label{
      display: inline-block;
      padding: 10px 0;
      width: 190px;
    }
    .node-active{
      color: #83a1f7;
    }
    .node-ellips{
      margin-left: 14px;
      display: inline-block;
      max-width: 190px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .custom-tree-node{
      display: flex;
      align-items: center;
    }
  }
  .right-main{
    flex: 1;
    overflow: auto;
    .right-title{
      background: #f8f8f8;
      padding: 10px 25px;
      position: relative;
    }
    .right-title::before{
      content: '';
      position: absolute;
      top: 11px;
      left: 15px;
      width: 3px;
      height: 18px;
      background: #f76767;
    }
    h2{
      padding: 15px 15px 10px;
      margin-bottom: 15px;
      border-bottom: 1px solid #e1e1e1;
    }
    .property-title{
      cursor: pointer;
      display: inline-block;
      padding: 2px 10px;
      margin-left: 10px;
      margin-bottom: 12px;
      border: 1px solid #dcdfe6;
      background: #f5f5f5;
      border-radius: 4px;
    }
    .property-active{
      color: #f76767;
    }
    .attri-synonym{
      display: flex;
      align-items: center;
      background: #f8f8f8;
      padding: 15px 25px;
      margin-bottom: 10px;
    }
    .synonym-item{
      max-height: 61px;
      overflow: auto;
      flex: 1;
    }
    .add-btn{
      display: inline-block;
      color: #f76767;
      padding: 4px 16px;
      border: 1px dashed;
      border-radius: 2px;
      cursor: pointer;
    }
    .add-btn-disabled{
      cursor: no-drop;
    }
  }
}

/deep/ .pb15{
  padding: 0px !important;
}

/deep/ .el-tree{
  background: #fff !important;
  height: calc(100% - 132px);
  overflow: auto;
  margin-top: 20px !important;
  padding-top: 0px;
}
/deep/ .el-tree-node__expand-icon{
  display: none;
}
/deep/ .el-tree-node__content{
  height: 30px;
}
/deep/ .el-tree-node{
  position: relative;
}
/deep/ .left-tree .tree-content > .el-tree-node:before,
/deep/ .left-tree .tree-content > .el-tree-node > .el-tree-node__children > .el-tree-node:before {
  content: " ";
  border-left: 1px dashed #4386c6;
  position: absolute;
  bottom: 0px;
  top: 30px;
  left: 8px;
  width: 1px;
  z-index: 98;
}
/deep/ .left-tree .tree-content > .el-tree-node > .el-tree-node__children > .el-tree-node:before{
  left: 27px;
  bottom: -8px;
  top: 20px;
}
/deep/ .property-dialog .el-dialog--center .el-dialog__body{
  padding-left: 40px !important;
  padding-right: 40px !important;
}
/deep/ .property-dialog .el-transfer{
  display: flex !important;
  justify-content: space-around !important;
  align-items: center;
}

.base-mian-cell-title {
    padding: 0 20px;
    margin-bottom: 15px;
    height: 36px;
    background: #f8f8f8;
    line-height: 36px;
    .tips {
      margin-left: 10px;
      font-weight: bold;
      float: left;
    }
    i{
      width: 2px;
      height: 16px;
      float: left;
      background: red;
      margin-top: 10px;
    }
  }
  .add-property {
    /deep/ .el-dialog__body{
      overflow: auto !important;
      max-height: 55vh !important;
    }
     /deep/ .tableScopeSwitch .el-switch__label {
        position: absolute;
        display: none;
        color: #fff;
    }
    /*打开时文字位置设置*/
    /deep/ .tableScopeSwitch .el-switch__label--right {
        z-index: 1;
        right: -10px;
    }
    /*关闭时文字位置设置*/
    /deep/ .tableScopeSwitch .el-switch__label--left {
        z-index: 1;
        left: 20px;
    }
    /*显示文字*/
    /deep/ .tableScopeSwitch .el-switch__label.is-active {
        display: block;
    }
    /deep/ .tableScopeSwitch.el-switch .el-switch__core,
    /deep/ .el-switch .el-switch__label {
        width: 50px !important;    /*开关按钮的宽度大小*/
    }
  }
  /deep/ .el-transfer__buttons .el-button{
    margin-left: 0px !important;
  }
  /deep/ .el-transfer-panel{
    width: 450px
  }
  /deep/ .el-transfer-panel__body .el-checkbox{
    user-select: auto !important;
  }
</style>